<template>
  <div class="content">
    <div class="page-content">
      <Navigation
          :navigation-list="[{id:1,value:'首页',url:'/home/index'},{id:2,value:'招聘会详情',url:'/JobFair'},{id:3,value:'在线预定',url:''}]"></Navigation>
      <div class="block">
        <div class="search-block">

          <div class="search-list">
            <table width="100%" border="0" cellspacing="0">
              <tr class="name-item1" style="background-color: #F6F6F8;">
                <td class="name-color search-name" style="width: 60%; padding-left: 20px;">职位信息</td>
                <td class="name-color search-name" style="width: 15%">应聘人选 <i class="el-icon-warning-outline"></i></td>
                <td class="name-color search-name" style="width: 15%">沟通 <i class="el-icon-warning-outline"></i></td>
                <td class="name-color search-name" style="width: 10%">
                  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                </td>
              </tr>
             <template v-if="workList.length>0">
               <tr v-for="(item,index) in workList" :key="item.id" class="name-item" :class="checkedCities.includes(item.id)?'active':''">
                 <td class="search-name2">
                   <div style="font-weight: bold; height: 30px;font-size: 18px;">{{item.jobTitle}}</div>
                   <div class="search-age">
                     <div class="age-color">{{item.jobAddress}}&nbsp;&nbsp;<span style="color: #DBDBDB">/</span>&nbsp;&nbsp;</div>
                     <div class="age-color">{{item.expRequireText}}&nbsp;&nbsp;<span style="color: #DBDBDB">/</span>&nbsp;</div>
                     <div class="age-color">{{item.minEducationText}}</div>
                   </div>
                 </td>
                 <td class="search-name3">{{0}}</td>
                 <td class="search-name3">{{0}}</td>
                 <td class="search-name3">
                     <el-checkbox :value="checkedCities.includes(item.id)" @change="checkChange($event,item.id)"></el-checkbox>
                 </td>
               </tr>
             </template>
              <tr v-else style="display: flex;justify-content: center;width: 100%;">暂无数据</tr>
            </table>
            <div class="btn-item" v-if="workList.length>0">
              <div class="btn2" @click="InsertFairCompany">确定</div>
              <div class="btn3" @click="back">取消</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Navigation from "@/components/Navigation/Navigation";
import {insertFairCompanyApi,getMyPublishByFairApi} from "@/api/jobFair";
let cityOptions = [];
export default {
  name: "JobOrder",
  components: { Navigation},

  data() {
    return {
      checkAll: false,
      page:1,
      limit:10,
      recruitType: 0,
      workList:[],
      keyWord:'',
      isIndeterminate: false,
      checkedCities:[]
    }
  },
  watch:{
    checkedCities(val){
      this.checkAll=val.length===this.workList.length;
      this.isIndeterminate=val.length>0&&val.length!=this.workList.length
    },
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities=[];
      if(val){
        this.checkedCities=this.workList.map(item=>{
          return item.id
        })
      }
    },
    checkChange(e,id){
      if(e){
        this.checkedCities.push(id)
      }else{
        this.checkedCities.splice(this.checkedCities.indexOf(id), 1)
      }
    },
    getMyList(){
      getMyPublishByFairApi({page:this.page,limit:this.limit}).then((res)=>{
        this.workList=res
      }).finally(()=>{
      })
    },
    back()
    {
      this.$router.back()
    },
    InsertFairCompany(){
      console.log(this.checkedCities);
       let postIds = this.checkedCities.join(',')
       if (this.checkedCities.length === 0) {
         this.$message.warning('请至少选择一个')
       } else {
         insertFairCompanyApi({sId: this.id, postIds}).then((res) => {
           this.$message.success(res)
         }).finally(() => {

         })
      }
    }
  },
  mounted() {
    this.utils.createParams(this,this.$route.query);
    this.getMyList()
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  .page-content {
    width: $contentWidth;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: $fullMinHeight;
    .block{
      background-color: #fff;
      height: auto;
      border-radius: 5px;
      margin-bottom: 30px;
      .seek-block{
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 30px 30px 0 30px;

        .seek-title{
          margin-right: 10px;
        }
        .seek-btn{
          width: 240px;
          border-radius: 10px;
          height: 40px;
          border: 1px solid #999;
          margin-right: 30px;
          padding-left: 20px;
        }
        .btn3{
          width: 70px;
          height: 40px;
          border-radius: 10px;

        }
      }
      .block-menu{
        border-bottom: #e4e4e4 1px solid;
        margin: 0 20px 0 20px;
        display: flex;
        flex-direction: row;
        .block-menu-type{
          display: flex;
          width: 85%;
        }
        .menu-block-btn{
          width: 150px;
          height: 35px;
          border-radius: 10px;
        }
        .tab-item{
          font-size: 16px;
          width: 100px;
          height: 50px;
          line-height: 30px;
          text-align: center;
          cursor: pointer;
        }
        .tab-item.active{
          border-bottom: 3px solid $orange;
          color: $orange;
        }
      }
      .search-block{
        padding: 20px;
        display: flex;
        flex-direction: column;

        .search-item{
          display: flex;
          flex-direction: row;
          margin-top: 10px;
          align-items: center;
          border-bottom: 1px solid #f0f0f0;
          .item-name{
            font-size: 14px;
            margin-right: 10px;
          }
          .item-box{
            border: $darkGray 1px solid;
            color: $darkGray;
            font-size: 14px;
            border-radius: 5px;
            height: 30px;
            width: 180px;
            margin-right: 20px;
          }
          .item-search{
            font-size: 14px;
            border-radius: 5px;
            height: 25px;
            width: 50px;
            border: $orange 1px solid;
            color: $orange;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
        .search-list{
          margin-top: 20px;
          .name-item1{
            flex-direction: row;
            height: 45px;
          }
          .name-item{
            flex-direction: row;
            height: 40px;
            .name-color{
              color: $darkGray;
            }
            .search-name{
              padding-left: 20px;
            }
            .search-name2{
              padding: 25px 0 20px 20px;
              .search-age{
                display: flex;
                .age-color{
                  color: #999;
                }
              }
            }
            .search-name3{
              font-weight: bold;
              height: 30px;
              padding-left: 20px;
              .search-btn{
                .btn-block{
                  font-size: 26px;
                  cursor: pointer;
                }
              }
            }
            .option-type{
              width: 15px;
              height: 15px;
            }
          }
          .name-item.active{
            background: #F6F6F8;
          }
          .list-item{
            font-weight: 14px;
            .work-name{
              display: flex;
              flex-direction: row;
            }
            .info-item{
              display: flex;
              flex-direction: row;
            }
          }
          .btn-item{
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-content: flex-end;
            margin-top: 20px;
            .btn2{
              width: 75px;
              height: 33px;
              border-radius: 10px;
              margin-right: 10px;
            }
            .btn3{
              width: 75px;
              height: 33px;
              border-radius: 10px;
              margin-right: 30px;
            }
          }
        }
      }
    }
  }
}
</style>
